<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">

        #areaDiv {
            border: 1px solid black;
            width: 300px;
            height: 50px;
            margin-bottom: 10px;
        }

        #showMsg {
            border: 1px solid black;
            width: 300px;
            height: 20px;
        }

    </style>
    <script type="text/javascript">

        window.onload = function(){
            //当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
            var areaDiv=document.getElementById("areaDiv");
            var showMsg=document.getElementById("showMsg");
            areaDiv.onmousemove=function (event) {
                //在showMsg显示鼠标的坐标
                //在IE8中响应函数触发时，浏览器不会传递事件对象，在IE8及以下浏览器中，将事件对象做为window对象的属性保存的
                // if (!event){
                //     envet=window.event;
                // }
                event=event||window.event;//也可以是这样写的

                var x=event.clientX;
                var y=event.clientY;
                // alert("x="+x+",y="+y);
                showMsg.innerHTML="x="+x+",y="+y;
            }
        };

    </script>
</head>
<body>
<script>
    /*事件对象
     *       当事件的响应函数被触发时，浏览器每次都会将一个事件对象做为实参传递进响应函数
     *       在事件对象中 封装了当前事件的一切信息 比如:鼠标的坐标  键盘哪个按键被按下 鼠标的滚动的方向
    *   clientX 可以获取鼠标指针的水平坐标
    *   clientY 可以获取鼠标指针的垂直坐标
    *
    * */
</script>
<div id="areaDiv"></div>
<div id="showMsg"></div>

</body>
</html>